﻿
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工序管理</title>
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <h3 style="text-align:center">工序添加页面</h3>

    <form class="layui-form" action="" style="margin:25px">
        <div>
            <input type="text" id="searchProcessNumber" placeholder="工序编号" class="layui-input" style="width: 300px; display: inline-block;">
            <input type="text" id="searchProcessName" placeholder="工序名称" class="layui-input" style="width: 300px; display: inline-block;">
            <button type="button" class="layui-btn layui-bg-blue" onclick="search()">查询</button>
            <button type="button" class="layui-btn layui-bg-green" onclick="showAddForm()">新增工序</button>
        </div>
    </form>

    <div style="margin:25px">
        <table id="processTable" class="layui-table">
            <thead>
                <tr>
                    <th>工序编号</th>
                    <th>工序名称</th>
                    <th>报工权限</th>
                    <th>报工数配比</th>
                    <th>不良品相列表</th>
                    <th>创建人</th>
                    <th>创建时间</th>
                    <th>修改人</th>
                    <th>修改时间</th>
                </tr>
            </thead>
            <tbody>
                <!-- 添加了id属性 -->
                <!-- 工序列表数据将填充在这里 -->
            </tbody>
        </table>
    </div>

    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
    <script src="//unpkg.com/jquery/dist/jquery.js"></script>
    <script>
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer;
            var form = layui.form;

            // 显示新增工序的弹框
            window.showAddForm = function () {
                layer.open({
                    type: 1,
                    title: '新增工序',
                    area: ['600px', 'auto'],
                    content: `
                                                        <form class="layui-form" id="addProcessForm">
                                                            <div class="layui-form-item">
                                                                <label class="layui-form-label">工序编号</label>
                                                                <div class="layui-input-inline">
                                                                    <input type="text" id="processNumber" name="processNumber" lay-verify="required" placeholder="请输入工序编号" class="layui-input">
                                                                </div>
                                                            </div>
                                                            <div class="layui-form-item">
                                                                <label class="layui-form-label">工序名称</label>
                                                                <div class="layui-input-inline">
                                                                    <input type="text" id="processName" name="processName" lay-verify="required" placeholder="请输入工序名称" class="layui-input">
                                                                </div>
                                                            </div>
                                                            <div class="layui-form-item">
                                                                <label class="layui-form-label">报工权限</label>
                                                                <div class="layui-input-inline">
                                                                    <select id="reportingAuthority" lay-filter="testSelect" required>
                                                                        <option value="">请选择报工权限</option>
                                                                        <option value="0">所有人</option>
                                                                        <option value="1">超级管理员</option>
                                                                        <option value="2">Admin</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="layui-form-item">
                                                                <label class="layui-form-label">报工数配比</label>
                                                                <div class="layui-input-inline">
                                                                    <input type="text" id="matching" name="matching" lay-verify="required" placeholder="请输入报工数配比" class="layui-input">
                                                                </div>
                                                            </div>
                                                            <div class="layui-form-item">
                                                                <label class="layui-form-label">不良品相列表</label>
                                                                <div class="layui-input-inline">
                                                                    <select id="adverseList" lay-filter="testSelect" required>
                                                                        <option value="">请选择不良品相列表</option>
                                                                                <option value="BL20220727152535731000002 | 不能折叠">BL20220727152535731000002 | 不能折叠</option>
                                                                                <option value="BL20220727152530033500001 | 上色不均匀">BL20220727152530033500001 | 上色不均匀</option>
                                                                                <option value="BL20220727152530033500004 | 包装尺寸不对">BL20220727152530033500004 | 包装尺寸不对</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="layui-form-item">
                                                                <button type="button" class="layui-btn" onclick="Add()">提交</button>
                                                            </div>
                                                        </form>
                                                    `
                });
                // 渲染表单元素
                form.render();
            };
            // 定义新增函数
            window.Add = function () {
                var processNumber = document.getElementById('processNumber').value;
                var processName = document.getElementById('processName').value;
                var reportingAuthority = document.getElementById('reportingAuthority').value;
                var matching = document.getElementById('matching').value;
                var adverseList = document.getElementById('adverseList').value;

                // 验证表单数据
                if (!processNumber || !processName || !reportingAuthority || !matching || !adverseList) {
                    layer.msg('请填写所有必填项');
                    return;
                }

                var requestData = {
                    processNumber: processNumber,
                    processName: processName,
                    reportingAuthority: reportingAuthority,
                    matching: parseFloat(matching),
                    adverseList: adverseList
                };

                // 发送 AJAX 请求
                fetch('@ViewBag.Durian' + '/api/Process/Handle', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(requestData)
                })
                    .then(response => response.json())
                    .then(data => {
                        layer.msg('新增成功');

                        layer.closeAll(); // 关闭弹框
                        search(); // 新增后加载工序列表
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        layer.msg('新增失败');
                    });
            };

            $(function () {
                search()
            });

            // 加载工序列表
            function search() {
                var processNumber = $("#processNumber").val() || 0;
                var processName = $("#processName").val() || "";
                var requestData = {
                    processNumber: processNumber,
                    processName: processName
                };

                $.post({
                    url: '@ViewBag.Durian' + '/api/Process/Handle1',
                    data: JSON.stringify(requestData), // 使用 JSON 格式
                    async: false,
                    dataType: "json",
                    contentType: "application/json",
                    success: res => {
                        console.log(res); // 修正控制台打印
                        var count = "";
                        $.each(res.data, function () {
                            count += `<tr>
                                                                <td>${this.processNumber}</td>
                                                                <td>${this.processName}</td>
                                                                <td>${this.reportingAuthority}</td>
                                                                <td>${this.matching}</td>
                                                                <td>${this.adverseList}</td>
                                                                <td>${this.createId}</td>
                                                                <td>${this.createDate.replace("T", " ").substring(0, 19)}</td>
                                                                <td>${this.updateId}</td>
                                                                <td>${this.updateDate}</td>
                                                    </tr> `
                        })
                        $("tbody").html(count)
                    }
                })
            };
        });
    </script>
</body>
</html>